<!--  -->
<template>
  <div class='user-page'>
    <c-title text="我的" :hide="false"></c-title>
    <div class="user-head">
      <img class="user-bg"  src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/customCluster/custom-bg.png"/>
      <h3 class="title">{{usableLove}}</h3>
      <p class="user-love">{{info.usable || '---'}}</p>
      <div class="statistics-board flex">
        <div class="board-item">
          <h3>今日收益</h3>
          <p>{{info.today_income || '---'}}</p>
        </div>
        <div class="board-item">
          <h3>昨日收益</h3>
          <p>{{info.yesterday_income || '---'}}</p>
        </div>
        <div class="board-item">
          <h3>累计收益</h3>
          <p>{{info.total_income || '---'}}</p>
        </div>
      </div>
    </div>
    <div class="user-menu flex">
      <div class="menu-item" @click="menuNav('baseRewardTemplate','plugin.customized-group.frontend.controllers.records.index')">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/customCluster/detail.png" />
        <h3>明细</h3>
      </div>
      <div class="menu-item" @click="menuNav('love_transfer')">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/customCluster/Donation.png" />
        <h3>转赠</h3>
      </div>
      <div class="menu-item" @click="menuNav('customTakeList')">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/customCluster/record.png" />
        <h3>参与记录</h3>
      </div>
      <div class="menu-item" @click="menuNav('customIndex')">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/customCluster/polyIndex.png" />
        <h3>聚合页</h3>
      </div>

    </div>
    <div class="user-team flex" @click="menuNav('cTatistics')">
      <div class="left-img">
        <div class="iconfont icon-fx_haoyou"></div>
      </div>
      <div class="team-wrap" >
        <h3>我的团队</h3>
        <p>{{info.team_num}}人</p>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import customUser_controller from "./customUser_controller.js";
export default customUser_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .user-page {
    height: auto;
    // min-height: 100vh;
    .user-head {
      padding:0.75rem;
      text-align: left;
      color: #FFFFFF;
      background-color: var(--themeBaseColor);
      position: relative;
      // background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/member/custom-bg.png') center center;
      .user-bg {
        position: absolute;
        right:0;
        bottom:0;
        width: 7.3125rem;
        height: 6.75rem;
      }
      .title {
        font-size: 0.875rem;
        padding: 0 0 0.625rem 0;
      }
      .user-love {
        font-size: 1.25rem;
        color: #FFFFFF;
      }
      .statistics-board {
        padding:1.25rem 0 0 0;
        // background-color: #fff;
        // padding:0.75rem 0 1rem 0;
        .board-item {
          flex:0 0 33.3%;
          text-align: center;
          color:#fff;
          h3 {
            font-size: 0.75rem;
            font-weight: 400;
            padding:0 0 0.375rem 0;
          }
          p {
            font-size: 0.875rem;
            font-weight: 400;
          }
        }
      }
    }
    .user-menu {
      background-color: #fff;
      padding:0.9375rem 0 0.75rem 0;
      .menu-item {
        flex:0 0 25%;
        img {
          width:2rem;
          height: 2rem;
        }
        h3 {
          font-size: 0.75rem;
          color: #333333;
          font-weight: 400;
          // padding:0.375rem 0 0 0;
        }
      }
    }
    .user-team {
      margin:0.75rem 0 0 0;
      padding:0.75rem;
      background-color: #fff;
      .left-img {
        padding:0 1rem 0 0;
        .icon-fx_haoyou {
          color:#FE5E56;
          padding:0.75rem;
          border-radius: 50%;
          background-color: #FFE7E6;
        }
      }
      .team-wrap {
        text-align: left;
        h3 {
          font-size: 0.875rem;
          font-weight: 400;
          color: #333333;
          padding: 0 0 0.25rem 0;
        }
        p {
          color: #AAAAB3;
          font-size: 0.75rem;
        }
      }
    }
  }
</style>